<template>
	<view class="select-time">
		<view class="time-box" @click="openTimeMask">
			<text>送达时间</text>
			<view>
				<text>{{ showTime }}</text>
				<text class="icon-jiantou iconfont"></text>
			</view>
		</view>
		<view class="global_mask time-mask" :class="{'active': showTimeMask}" @click="openTimeMask">
		  <view class="mask-content " @click.stop="preventDefault">
			<view class="title-box">
			  <text @click="openTimeMask">取消</text>
			  <text class="title">送达时间</text>
			  <text @click="openTimeMask('confirm')">确定</text>
			</view>
			<picker-view class="time-picker" :value="timeIndex" @change="onValuesChange" indicator-style="height: 50px">
				<picker-view-column>
					<view class="item" v-for="(item,index) in timeList[0]" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in timeList[1]" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		  </view>
		</view>
	</view>
</template>

<script>
var app = getApp();
import common from '../../../utils/common.js';
export default {
	name: 'SelectTime',
	data() {
		return {
			showTimeMask: false, // 帮我买 是否显示时间弹窗
			timeList: [],
			showTime: '', // 显示 时间
			dayIndex: 0, // 帮我送 时间选择的是第几天
			dayValue: '今天',
			pickerValue: [], // 时间picker选择的值
			timeOther: [],
			timeIndex: [0, 0],
			timeInfoNew: [],
			currency: '¥',
		};
	},
	props: ['timeInfo', 'type'],
	watch: {
		timeInfo: {
			immediate: true,
			handler (val,newVal) {
				this.timeInfoNew = newVal?newVal:val
				this.init()
			}
		}
	},
	created() {
		common.changeCurrency(this);
		this.init()
	},
	methods: {
		init() {
			if (this.timeInfoNew.length > 0) {
				console.log('6666666', this.timeInfoNew);
				let timeOther = [];
				this.timeList[0] = [];
				this.timeInfoNew.map(item => {
					this.timeList[0].push(item.show);
					let arr = [];
					// alert(this.type)
					// if(this.type == '2') { // 确认订单页的选择时间
						arr = item.timeList.map(item => {
							return `${item.time}(${this.currency}${item.delivery_fee}基础配送费)`
						});
					// }else {
						// arr = item.timeList.map(item => item.time);
					// }
					timeOther.push(arr);
				});
				this.timeList[1] = timeOther[0];
				
				this.dayValue = this.timeList[0][0];
				if (this.timeIndex[0] == 0 && this.timeIndex[1] == 0) {
					this.$emit('getTime', this.timeInfoNew[0].day + ' ' + this.timeInfoNew[0].timeList[0].time);
					console.log('11111111111111111111', this.timeInfoNew[0].day + ' ' + this.timeInfoNew[0].time);
					
					let firstTxt = this.type == 3 ? '立即送达' : '立即配送';
					this.showTime = timeOther[0][0] = firstTxt + ' ' + timeOther[0][0];
				}
				this.timeOther = timeOther;
				
				console.log('11111111111111111111', this.timeList, this.timeOther);
			} else {
				this.showTime = this.type == 3 ? '立即送达' : '立即配送';
			}
		},
		// 帮我送 打开时间弹窗
		openTimeMask(type) {
			if (this.timeInfoNew.length == 0) {
				return;
			}
			this.showTimeMask = !this.showTimeMask;
			if (type == 'confirm') {
				let day = this.timeList[0][this.timeIndex[0]]
				let time = this.timeList[1][this.timeIndex[1]]
				this.showTime = time.indexOf('立即') != -1 ? time : day + ' ' + time;
				this.$emit('getTime', this.timeInfoNew[this.timeIndex[0]].day + ' ' + this.timeInfoNew[this.timeIndex[0]].timeList[this.timeIndex[1]].time);
			}
		},
		// 选择时间
		onValuesChange(e) {
			let timeIndex = e.detail.value
			let dayList = this.timeList[0].values;
			// 切换天的时候，对应的time也要切换
			if (timeIndex[0] != this.timeIndex[0]) {
				this.timeList[1] = this.timeOther[timeIndex[0]]
			}
			this.timeIndex = timeIndex;
		},
		preventDefault() {
			return false;
		}
	}
};
</script>

<style lang="stylus" scoped>
.select-time
	.time-box
		background #fff
		display flex
		align-items center
		justify-content space-between
		padding 18px 10px
		font-size 14px
		.iconfont 
			vertical-align middle
	.time-mask
		.title-box
			display flex
			justify-content space-between
			align-items center
			font-size 14px
			padding 15px 10px
			border-bottom 1PX solid #e5e5e5
			.title
				font-size 15px
		.time-picker
			height 240px
			.item
				display flex
				align-items center
				justify-content center
				font-size 14px
				color #666
				margin-right 10rpx
			/deep/ uni-picker-view-column:first-child
				flex-basis 30%
			/deep/ uni-picker-view-column:last-child
				flex-basis 70%
				
</style>
